<template>
  <div class="mat-grid-card">
    <el-container>
      <el-aside width="150px" v-if="isBook">
        <img
          v-if="mat.cover"
          :src="coverUrl"
          :alt="mat.title"
          :title="mat.title"
          class="cover"
          @click="viewMat"
        />
        <dummy-cover v-if="!mat.cover" :title="mat.title" @click="viewMat"></dummy-cover>
      </el-aside>
      <el-main class="info-pane">
        <div class="tags-bar">
            <tag
              v-for="tag in mat.tags"
              :key="tag.val"
              :tag="tag"
              @click="tagClicked(tag)"
            ></tag>
            <div class="tag-wrap edit" @click="editTags">
              <div class="neo-stat-icon">
              <ri i="edit" @click="editTags"></ri>
              </div>
            </div>
        </div>
        <div class="title-pane">
          <ri v-if="isArticleSet" class="kind-icon" i="collection" title="文集"></ri>
          <span v-if="mat.format == MatFormat.Link">
            <a class="title" :href="mat.link" target="_blank" > {{mat.title}}
              <ri :title="mat.link" i="elink"></ri>
            </a>
          </span>
          <span v-else>
          <a class="title">
            <span @click="viewMat">{{mat.title}}</span>
          </a>
          </span>
          <span class="authors">
            <span v-for="(a, i) in this.mat.authors" :key="i">
              <a class="author-link" :href="'/#/p/' + a.id">{{a.fullname}}</a>
            </span>
          </span>
          <span class="rate">
            <el-rate v-model="rate" disabled show-score></el-rate>
          </span>
        </div>
        <div class="desc" :class="kindClass" v-html="intro"></div>
        
      </el-main>
    </el-container>
    <div class="toolbar">
      <span class="stats">
        <!--
        <span>
          <ri title="收藏" i="heart"></ri>
          <label>99</label>
        </span>
        -->
        <span>
          <star :mid="mat.id" :stars="stats.stars"></star>
        </span>
        <span>
          <nistat i="heat" :value="mat.heat"></nistat>
        </span>
        <span>
          <nistat i="comments" :value="stats.notes"></nistat>
        </span>
        <!--
        <span>
          <ri title="引用" i="quote"></ri>
          <label>12</label>
        </span>
        -->
      </span>
      <vsep></vsep>
      <span class="tools">
        <span><ri i="edit" title="编辑" @click="edit"></ri></span>
        <span><ri i="share" title="分享" @click="share"></ri></span>
        <!-- <span><ri class="grey" i="delete" title="删除" @click="removeBook"></ri></span> -->
      </span>
      <span class="source">
        <a v-show="mat.source" class="link-source" :href="'/#/sources/' + mat.source">{{mat.source}}</a>
      </span>
    </div>
  </div>
</template>

<script>
import { toHumanString } from "@js/math.js";
import { makeMdSummary } from "@js/utils/texts.js";
import DummyCover from "@tools/DummyCover.vue";
import Nistat from "@tools/NeoStatIcon.vue";
import Star from "@tools/Star.vue";
import { MatKind, MatFormat } from '@/js/constants';
import Tag from "./Tag.vue";
export default {
  components: {
    DummyCover,
    Tag,
    Nistat,
    Star
  },
  props: {
    mat: Object,
    detailUrlMaker: Function,
    showDefaultToolbar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      MatFormat: MatFormat,
      rate: 4.8,
    };
  },
  computed: {
    stats() {
      return this.mat.stats || {notes: 0, stars: 0};
    },
    isBook() {
      return this.mat.kind == MatKind.Book;
    },
    coverUrl() {
      return `/res/img/${this.mat.cover}_file.png`;
    },
    popularity() {
      return toHumanString(1);
    },
    intro() {
      return makeMdSummary(this.mat);
    },
    kindClass() {
      return "poem";
    },
    isArticleSet() {
      return this.mat.kind == MatKind.ArticleSet;
    },
    
  },
  methods: {
    onClick() {
      console.log("On mat info click");
    },
    edit() {
      this.$router.push("/mats/edit/" + this.mat.id);
    },
    share() {
      // TODO: implement this
    },
    removeBook() {
      this.$confirm("确认删除书籍？").then(() => {
        this.authGet("api/v1/books/remove/" + this.mat.id)
          .then(() => {
            this.$message("书籍删除成功");
            this.$emit("mat-removed", this.mat.id);
          })
          .catch(err => {
            this.$message("书籍删除失败！ " + err);
          });
      });
    },
    viewMat() {
      let url = '';
      if (this.detailUrlMaker) {
        url = this.detailUrlMaker(this.mat);
      } else {
        url = "/mats/view/" + this.mat.id;
      }
      this.$router.push(url);
    },
    editTags() {
      if (this.mat.id) {
        this.$emit("edit-tags", this.mat);
      }
    },
    openExternal() {
      window.open(this.mat.link, "_blank");
    },
  }
};
</script>

<style lang="stylus">
// TODO: 和matcard的样式合并起来
.mat-grid-card
  display inline-block
  border 1px dotted #eee
  border-radius 6px
  background-color #fbfbfb
  box-shadow 1px 1px 2px 0px rgba(0,0,0,.1)
  transition border 500ms ease-out, box-shadow 500ms ease-out, background-color 500ms ease-out
  // border-radius 10px
  padding 1vh 0.5vw
  width 22vw
  min-width 370px
  margin 0 1vw 2vh 0
  text-align left

  &:hover
    border 1px solid #B3D8FF
    background-color #ECF5FF
    box-shadow 1px 1px 4px 0px #B3D8FF


  .el-rate__icon
    margin-right 0px
  .cover
    float left
    width 140px
    height 203px
    border 1px solid #ebebeb
    background-position center
    background-size 100%
    box-shadow 2px 4px 6px #bbb
    cursor pointer

  .info-pane
    height 220px
    padding 0 0.5vw

    .tags-bar
      margin 0 0 1.5vh 0

      .tag-wrap
        margin-right 2px

    .title-pane
      .kind-icon
        color #999
        margin-right 0.2vw
      .title
        height 24px
        line-height 24px
        font-weight bold
        font-size 1.2em
        color #333 !important
        cursor pointer

      .authors
        padding-left 0.5vw
        font-size 0.8em
        color #999

    .desc
      border-top 1px dashed #dfdfdf
      margin-top 0.5vh
      padding-top 0.5vw
      font-size 1em
      color #666

      &.poem
        font-size 1.05em
        line-height 1.6em
        color #2C3E50

    .rate
      margin-left 0.5vw
      .el-rate
        display inline-block

  .toolbar
    line-height 1em
    height 1em
    padding 0 0.5vw

    >span
      margin-right 5px

    .tools
      .icon-button
        color #409EFF
        cursor pointer

    .stats
      color #666
      label
        font-size 0.9em
        margin-right 5px
        color #999
    
    .source
      float right
      font-size 0.8em

      .link-source
        color #999
        text-decoration none
        font-size 0.9em

        &:hover
          text-decoration underline


</style>


